<template>
  <div class="container">
    <div class="querySearch">
      <van-field
        clickable
        name="date"
        :value="date"
        type="datetime"
        label="时间："
        placeholder="点击选择日期"
        @click="showCalendar = true"
        :clearable="true"
      />
      <van-field
        clickable
        name="type"
        :value="type"
        label="类型："
        placeholder="点击选择类型"
        @click="showType = true"
        :clearable="true"
      />
    </div>
    <div :style="`height: ${listHeight}px;overflow-y: scroll;`">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
        class="list"
      >
        <div class="listItem" v-for="item in list" :key="item.requestNo">
          <div class="header">
            <div class="time">{{ item.createDate }}</div>
            <div class="statu">{{ item.type }}</div>
          </div>
          <div class="content">
            <div class="name">{{ item.note }}</div>
            <div :class="'money ' + (item.type == '退款' ? 'error' : '')">
              {{ item.amount }}
            </div>
          </div>
          <div class="orderNo">订单号：{{ item.requestNo }}</div>
        </div>
      </van-list>
    </div>
    <van-popup v-model="showType" position="bottom">
      <van-picker
        show-toolbar
        :columns="columns"
        @confirm="onConfirm"
        @cancel="showType = false"
      />
    </van-popup>
    <van-calendar
      v-model="showCalendar"
      type="range"
      @confirm="onTimeConfirm"
      :min-date="new Date(2020, 0, 1)"
    />
  </div>
</template>
<script>
import { query_fund_logs_post } from '@/api/app/seller'
const typeList = [
  { text: '全部', value: '' },
  { text: '出售', value: '0' },
  { text: '提现', value: '1' },
  { text: '平台发放奖励', value: '3' },
  { text: '退款', value: '4' },
]
export default {
  data() {
    return {
      listHeight: 0,
      showCalendar: false,
      showType: false,
      type: '',
      typeValue: '',
      date: '',
      dateStart: '',
      dateEnd: '',
      columns: typeList.map((item) => item.text),
      loading: false,
      finished: false,
      page: 1,
      pageSize: 10,
      list: [],
      total: 0,
    }
  },
  created() {},
  mounted() {
    const mainTabbar = document.querySelector('.main-tabbar')
    this.listHeight = window.innerHeight - mainTabbar.offsetHeight - 88
  },
  methods: {
    onConfirm(value) {
      this.type = value
      this.showType = false
      const findIndex = typeList.findIndex((item) => item.text === value)
      this.typeValue = typeList[findIndex].value
      this.initData()
    },
    onTimeConfirm(date) {
      const [start, end] = date
      this.showCalendar = false
      console.log(start)
      this.dateStart = this.formatDate(start, '-') + ' 00:00:00'
      this.dateEnd = this.formatDate(end, '-') + ' 23:59:59'
      this.date = `${this.formatDate(start)} - ${this.formatDate(end)}`
      this.initData()
    },
    formatDate(date, symbol = '/') {
      return `${date.getFullYear()}${symbol}${date.getMonth() +
        1}${symbol}${date.getDate()}`
    },
    initData() {
      this.list = []
      this.total = 0
      this.loading = false
      this.finished = false
      this.page = 1
      this.onLoad()
    },
    onLoad() {
      query_fund_logs_post({
        data: {
          transSubCode: this.typeValue,
          page: this.page,
          pageSize: this.pageSize,
          startTime: this.dateStart,
          endTime: this.dateEnd,
        },
      }).then((data) => {
        if (this.refreshing) {
          this.list = []
          this.refreshing = false
        }
        this.list = this.list.concat(data.records)
        ++this.page
        this.loading = false
        if (this.list.length === data.total) {
          this.finished = true
        }
      })
    },
  },
}
</script>

<style lang="scss" src="./styles/index.scss"></style>
